{extend name='template/base'}{/extend}
{block name='style'}
<style>
    body{
        overflow-x: hidden;
    }
    #power_name:focus{
        border-color:#d2d6de!important;
    }
</style>
<link rel="stylesheet" href="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.css">
{/block}
{block name='script'}
<script src="__STATIC__/plugins/bootstrap-treeview/bootstrap-treeview.min.js"></script>
{/block}
{block name='content'}
<form class="form-horizontal" id="form" action="{:url('AdminMenu/set_power_update')}">
    <div class="box-body">
        <div class="form-group">
            <label class="col-sm-3 control-label">权限目录</label>
            <div class="col-sm-6" style="position: relative;">
                <div class="input-group" onclick="show_power_tree()">
                    <input style="cursor: pointer"  readonly="true" class="form-control" type="text" name="power_name" id="power_name" value="{$data.power_name ?? '请选择权限目录'}">
                    <span class="input-group-addon" style="background: #eeeeee;border-radius: 0 4px 4px 0;cursor: pointer"><i class="fa fa-chevron-down"></i></span>
                </div>
                <input type="hidden" id="id" name="id" value="{$data.id}">
                 <div class="treeview" id="power_treeview" style="display: none;position: absolute;z-index: 999;"></div>
                <input type="hidden" id="power_id" name="power_id" value="{$data.power_id ?? '0'}">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-9 col-sm-offset-3">
                <button type="submit" class="btn btn-primary">&nbsp;&nbsp;提交&nbsp;&nbsp;</button>
                <button type="button" class="btn btn-default radius ml-20" onclick="layer_close();">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </div>
</form>
{/block}
{block name='script_extra'}
<script>
    var power_tree_data_url="{:url('AdminMenu/power_tree_data')}";
</script>
<script>
    $("#form").Validform({
        tiptype:2,
        showAllError:true,
        ajaxPost: true,
        callback: function (res) {
            if (res.success == true){
                layer.msg(res.message, {time: 1000},function () {
                    layer_close();
                    parent.window.location.reload();
                });
            }else{
                layer.alert(res.message);
            }
        }
    });

    function show_power_tree() {
        var treeview=$('#power_treeview');
        get_power_tree();
        if(treeview.is(":hidden")){
            treeview.show();
        }else{
            treeview.hide();
        }
    }
    function get_power_tree() {
        var treeview=$('#power_treeview');
        $.post(power_tree_data_url, function (json) {
            console.log(json);
            treeview.treeview({
                color:'#428bca',
                onNodeSelected: function(event, node) {
                    $('#power_name').val(node.text);
                    $('#power_id').val(node.id);
                    treeview.hide();
                },
                levels:2,
                data: json});
        });
    }

</script>
{/block}